<template>
  <div class="source">
    <pageHeader :active="3" :bgColor="'#292c4d'"></pageHeader>
    <div class="page-content">
      <div class="mt70 add-source">
        <div
          class="source-img pr"
          @mouseenter="show = true"
          @mouseleave="show = false"
        >
          <img src="../../assets/images/addService.png" alt="" width="100%" />
          <div class="describe">数据服务入驻</div>
          <div class="modal" v-show="show">
            <div class="join-btn">
              <p class="cfff f16 mb10">提交使用反馈，获取专属服务</p>
              <el-button type="primary" size="small">立即反馈</el-button>
            </div>
          </div>
        </div>
      </div>

      <div class="content">
        <div class="header">
          <el-radio-group
            v-model="scene"
            @change="sceneChange($event)"
            fill="#3A62D7"
            style="margin-bottom: 30px"
          >
            <el-radio-button
              v-for="item in sceneList"
              :key="item.id"
              :label="item.id"
              >{{ getSceneName(item.id) }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div class="naver">
          <div>&nbsp</div>
          <el-button size="small" @click="add(1)">新增</el-button>
        </div>
        <div class="main">
          <div class="aside">
            <div class="nav">
              <div class="title">
                <img src="../../assets/images/theme.png" alt="" class="mr10" />
                产品
              </div>
              <div class="nav-list">
                <div
                  v-for="item in produceList"
                  :key="item.id"
                  class="nav-item"
                  @click="click2(item.id)"
                  :class="active2 == item.id ? 'active' : ''"
                >
                  <div class="f14">{{ item.name }}</div>
                </div>
              </div>
            </div>
            <div class="nav">
              <div class="title">
                <img src="../../assets/images/theme.png" alt="" class="mr10" />
                数据服务主题
              </div>
              <div class="nav-list">
                <div
                  v-for="item in moduleList"
                  :key="item.id"
                  class="nav-item"
                  @click="click(item.id)"
                  :class="active == item.id ? 'active' : ''"
                >
                  <div class="f14" style="white-space: nowrap">
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <div
              class="item pt20"
              v-for="(item, index) in moduleList"
              :key="index"
            >
              <div class="title">
                {{ item.name }}
                <div class="anniu">
                  <span v-if="isLogin" @click="edit(item)"> 编辑 </span>
                  <span v-if="isLogin">|</span>
                  <el-popconfirm
                    v-if="isLogin"
                    @confirm="del(item)"
                    title="是否要删除当前数据？"
                  >
                    <span slot="reference"> 删除 </span>
                  </el-popconfirm>
                </div>
              </div>
              <div class="remark">功能介绍：{{ item.desc }}</div>
              <div class="pb20 flex j-between a-center bb1">
                <div>
                  <el-tag class="mr10" effect="dark" size="mini">{{
                    getTagName(item.productId)
                  }}</el-tag>
                </div>
                <div class="flex">
                  <div class="mr20">更新时间：{{ item.updateTime }}</div>
                  <div>发布时间：{{ item.createTime }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <pageFooter></pageFooter>

    <el-dialog
      :title="isAdd == 1 ? '添加数据' : '编辑数据'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      class="dialog-box"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="标题" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请输入标题"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="请求方式" prop="method">
          <!-- <el-input v-model="form.method" autocomplete="off"></el-input> -->
          <el-select v-model="form.method" placeholder="请选择请求方式">
            <el-option label="GET" value="GET"></el-option>
            <el-option label="POST" value="POST"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="接口名称" prop="interfaceName">
          <el-input
            v-model="form.interfaceName"
            placeholder="请输入接口名称"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="数据主题" prop="subject">
          <el-select v-model="form.subject" placeholder="请选择数据主题">
            <el-option label="门站" :value="1"></el-option>
            <el-option label="客服" :value="2"></el-option>
            <el-option label="工单" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="源系统" prop="sourceSystem">
          <el-select v-model="form.sourceSystem" placeholder="请选择源系统">
            <el-option label="东日气站站控系统" :value="1"></el-option>
            <el-option label="易联云客户管理系统" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="更新频率" prop="updateFrequency">
          <el-select
            v-model="form.updateFrequency"
            placeholder="请选择更新频率"
          >
            <el-option label="每天" :value="1"></el-option>
            <el-option label="每月" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="安全等级" prop="dataLevel">
          <el-select v-model="form.dataLevel" placeholder="请选择数据安全等级">
            <el-option label="1级" :value="1"></el-option>
            <el-option label="2级" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开放条件" prop="openCondition">
          <el-select
            v-model="form.openCondition"
            placeholder="请选择数据安全等级"
          >
            <el-option label="无条件开放" :value="1"></el-option>
            <el-option label="需申请使用" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="内容" prop="desc">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pageHeader from '@/components/pageHeader.vue'
import pageFooter from '@/components/pageFooter.vue'
import { scene, product, getDataSubject } from '@/api/sceneProduct' //api接口
import {
  getPwDataService,
  addPwDataService,
  editPwDataService,
  delPwDataService
} from '@/api/dataService' //api接口
import { mapGetters } from 'vuex'
export default {
  name: 'DataService',
  computed: {
    // 获取状态管路设置的值
    ...mapGetters(['isLogin'])
  },
  data() {
    return {
      dialogFormVisible: false,
      scene: '',
      sceneList: [],
      active2: 0,
      produceList: [],
      moduleList: [],
      form: {
        name: '',
        interfaceName: '',
        method: '',
        openCondition: '',
        sourceSystem: '',
        subject: '',
        updateFrequency: '',
        dataLevel: '',
        desc: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入标题名称',
            trigger: 'blur'
          }
        ],
      },

      list: [
        {
          title: '外勤人员实时位置',
          content: '包括公司名称,员工姓名,经度,纬度,坐标等信息',
          domain: '工单', //数据主题
          update: '每天', //更新频率
          systemName: '易联云客户管理系统', //源系统
          theme: 3, //所属数据主题
          system: 2, //源系统
          leave: 3, // 安全等级
          condition: '无条件开放',
          download: 0, //调用
          browse: 0 //访问
        },
      ],

      show: false,
      theme: 0, // 1-门站，2-客服，3-工单，4-工程，5-交付
      system: 0, // 1-东日气站站控系统，2-易联云客户管理系统），3-工程建设管理系统，4-线路智能工地系统，
      active: 0, // 菜单顺序排列

      isAdd: 1, //1添加2编辑

      numbers: {
        mz: 0,
        kh: 0,
        gd: 0,
        gc: 0,
        jf: 0
      }
    }
  },
  components: {
    pageHeader,
    pageFooter
  },

  created() {
    this.getList()
    this.initData()
  },

  methods: {
    //获取列表数据
    getList() {
      getPwDataService({}).then((response) => {
        console.log(response)
        if (response.code == 0) {
          this.list = response.data
          var mz = 0
          var kh = 0
          var gd = 0
          var gc = 0
          var jf = 0
          this.list.forEach(function (element, index) {
            if (element.subject == 1) {
              mz = mz + 1
            } else if (element.subject == 2) {
              kh = kh + 1
            } else if (element.subject == 3) {
              gd = gd + 1
            } else if (element.subject == 4) {
              gc = gc + 1
            } else if (element.subject == 5) {
              jf = jf + 1
            }
          })

          this.numbers = {
            mz: mz,
            kh: kh,
            gd: gd,
            gc: gc,
            jf: jf
          }
        }
      })
    },
    getTagName(parentId){
      let name = ''
      this.produceList.forEach((item) => {
        if (item.id == parentId) {
          name = item.name
        }
      })
      return name
    },
    //添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form)

          if (this.isAdd == '1') {
            console.log(11)
            addPwDataService(this.form).then((response) => {
              console.log(response)
              if (response.code == 0) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.$refs[formName].resetFields()
                this.dialogFormVisible = false

                this.getList()
              }
            })
          } else {
            console.log(22)
            editPwDataService(this.form).then((response) => {
              console.log(response)
              if (response.code == 0) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.$refs[formName].resetFields()
                this.dialogFormVisible = false

                this.getList()
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    edit(item) {
      this.isAdd = 2
      this.dialogFormVisible = true

      this.form = item
    },

    //删除
    del(item) {
      delPwDataService(item.id).then((response) => {
        console.log(response)
        if (response.code == 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        }
      })
    },

    add(index) {
      this.isAdd = 1
      this.dialogFormVisible = true

      this.form = {
        name: '',
        interfaceName: '',
        method: '',
        openCondition: '',
        sourceSystem: '',
        subject: '',
        updateFrequency: '',
        dataLevel: '',
        desc: ''
      }
    },

    //是否显示更多
    isShow(index) {
      this.list[index].show = !this.list[index].show
    },

    click2(active) {
      this.active2 = active
    },
    click(active) {
      this.active = active
    },
    getDataSubjectList(pordId){
      getDataSubject(pordId, 822756023697408).then((res) => {
        // console.log(res.data)
        this.moduleList = res.data || []
        if (this.moduleList.length > 0) {
          this.active = this.moduleList[0].id || ''
        }
      })
    },
    getSceneName(id) {
      let name = ''
      this.sceneList.forEach((item) => {
        if (item.id == id) {
          name = item.name
        }
      })
      return name
    },
    getProduceList() {
      product(this.scene).then((res) => {
        this.produceList = res.data || []
        if (this.produceList.length > 0) {
          this.active2 = this.produceList[0].id || ''
          this.getDataSubjectList(this.active2)
        }
      })
    },
    initData() {
      scene().then((res) => {
        // console.log('场景',res.data)
        this.sceneList = res.data || []
        this.scene = this.sceneList[0].id || ''
        this.getProduceList()
      })
      this.active2 = this.moduleList[0].id || ''
    },
    sceneChange() {
      // console.log(e)
      this.getProduceList()
    },
  }
}
</script>

<style lang="scss" scoped>
.source {
  margin-top: 70px;

  .page-content {
    min-height: calc(100vh - 300px);
  }

  .add-source {
    background: url('../../assets/images/recourse.png') no-repeat;
    padding-top: 50px;
    background-size: 100% 300px;
    height: 200px;
    overflow: hidden;
    min-width: 1200px;

    .source-img {
      width: 50%;
      margin: 0 auto;
      padding: 15px;
      background: #fff;
      height: 100%;

      .describe {
        position: absolute;
        top: 150px;
        right: 40px;
        font-size: 18px;
        color: #fff;
      }

      .modal {
        position: absolute;
        top: 15px;
        left: 15px;
        bottom: 15px;
        right: 15px;
        background: rgba(51, 51, 51, 0.7);
      }

      .join-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .add-box {
    width: 1200px;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    text-align: right;
  }

  .content {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 50px;
    flex-direction: column;
    .header {
      margin: 10px 0 -10px 229px;
      display: flex;
      justify-content: start;
    }
    .naver {
      display: flex;
      justify-content: space-between;
      margin: -1px 0 10px 229px;
    }
    .main {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      margin-bottom: 50px;
      .aside {
        width: 200px;
        margin-right: 30px;
        .nav {
          background: #efeff4;
          text-align: left;
          margin-bottom: 20px;
          &:last-child {
            margin-bottom: 0;
          }
          .title {
            height: 45px;
            display: flex;
            align-items: center;
            padding-left: 20px;
            background: #292c4d;
            color: #fff;
            font-size: 16px;
          }
          .nav-list {
            .nav-item {
              padding: 0 20px;
              height: 45px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-left: 4px solid #efeff4;
              transition: all 0.3s;
              cursor: pointer;
              .count {
                padding: 0 10px;
                background: #fff;
                border-radius: 20px;
                color: #57aeeb;
                font-size: 12px;
              }
              &:hover {
                border-left-color: #292c4d;
                color: #292c4d;
                font-weight: bold;
              }
              &:hover .count {
                background: #efeff4;
                color: #292c4d !important;
                font-weight: bold;
              }
            }
            .active {
              background: #d6e1f2;
              border-left-color: #292c4d !important;
              color: #292c4d !important;
              font-weight: bold !important;
              .count {
                background: #efeff4 !important;
                color: #292c4d !important;
                font-weight: bold !important;
              }
            }
          }
        }
      }
      .list {
        background: rgb(242, 247, 251);
        padding: 15px 0;
        flex: 1;
        .item {
          text-align: left;
          padding: 0 20px;
          .title {
            font-size: 18px;
            margin-bottom: 10px;

            .anniu {
              float: right;
              font-size: 12px;
              color: #0a6cff;

              span {
                cursor: pointer;
              }
            }
          }
          .remark {
            font-size: 12px;
            margin-bottom: 15px;
          }
          .bb1 {
            border-bottom: 1px dotted #d6e1f2;
          }
          &:hover {
            color: #0a6cff !important;
            border: 1px solid #0a6cff;
            background: #fff;
          }
        }
      }
    }
  }

  .dialog-box {
    text-align: left;

    .el-form-item {
      // width: 300px;
      // .el-form-item__content {
      //   width: 100%;
      // }
    }

    .el-select {
      width: 100%;
    }
  }
}
</style>
